import React from "react";
import { addSysDictData, updateSysDictData } from "@/api/sys/sysDict";
import useRenderCheck from "@/hooks/renderCheck";
import { useAppDispatch, useAppSelector } from "@/store";
import {
  get_sys_dict_data_page,
  select_dict_type_list,
  select_is_show_dict_data_modal,
  set_is_show_dict_data_modal,
} from "@/store/slice/SysDict";

import { Form, Input, InputNumber, Modal, Select, message } from "antd";

const { TextArea } = Input;

function SysDictDataMOdal() {
  useRenderCheck("SysDictDataMOdal")
  const [formRef] = Form.useForm();
  const dispatch = useAppDispatch();
  const code_options: SysDictDataEntityType[] = useAppSelector(
    select_dict_type_list
  );
  const is_show_data = useAppSelector(select_is_show_dict_data_modal);

  function handleOk() {
    formRef
      .validateFields()
      .then(async (values) => {
        // 表单校验通过，执行提交逻辑
        const res =
          is_show_data.mode === 1
            ? await addSysDictData(values)
            : await updateSysDictData({ ...values, id: is_show_data.data.id });
        if (res) {
          message.open({
            type: "success",
            content: "操作成功!",
          });
          const params = {
            current: 1,
            size: 10,
          };
          dispatch(get_sys_dict_data_page(params));
          onCancel();
        } else {
          message.open({
            type: "error",
            content: "操作失败!",
          });
        }
      })
      .catch(() => {
        message.open({
          type: "warning",
          content: "请填写完整信息!",
        });
      })
      .finally(() => {});
  }
  function reset() {
    formRef.resetFields();
  }
  function onCancel() {
    reset();
    dispatch(
      set_is_show_dict_data_modal({
        show: false,
        title: "",
        mode: 1,
        data: {},
      })
    );
  }

  function onChange(value: any) {}
  return (
    <Modal
      title={is_show_data.title}
      open={is_show_data.show}
      onOk={handleOk}
      onCancel={onCancel}
    >
      <Form
        form={formRef}
        labelAlign="right"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
        onValuesChange={onChange}
      >
        <Form.Item
          name="dictCode"
          label="字典类型编码"
          rules={[
            {
              required: true,
              message: "请输入字典类型编码",
            },
          ]}
        >
          <Select placeholder="类型" allowClear options={code_options} />
        </Form.Item>
        <Form.Item
          name="paramValue"
          label="字典标签"
          rules={[
            {
              required: true,
              message: "请输入字典标签",
            },
          ]}
        >
          <Input placeholder="字典标签" allowClear />
        </Form.Item>
        <Form.Item
          name="paramType"
          label="字典值"
          rules={[
            {
              required: true,
              message: "请输入字典值",
            },
          ]}
        >
          <Input placeholder="字典值" allowClear />
        </Form.Item>
        <Form.Item
          name="sort"
          label="排序号"
          initialValue={is_show_data.data?.sort || 999}
        >
          <InputNumber />
        </Form.Item>
        <Form.Item name="remark" label="描述">
          <TextArea placeholder="描述" allowClear rows={4} />
        </Form.Item>
      </Form>
    </Modal>
  );
}
export default React.memo(SysDictDataMOdal);
